<template>
	<el-drawer
		v-model="visible"
		:title="titleMap[mode]"
		:size="800"
		append-to-body
		destroy-on-close
		@closed="$emit('closed')"
	>
		<el-container>
			<el-main>
				<div style="padding: 0px 30px">
					<el-form
						ref="dialogForm"
						:model="form"
						:rules="rules"
						:disabled="mode == 'show'"
						label-width="100px"
						label-position="left"
					>
						<el-row>
							<el-col :span="10">
								<el-form-item prop="productCode">
									<template #label>
										<span style="text-align: right">产品编码</span>
									</template>
									<el-input v-model="form.productCode" disabled placeholder="请输入产品编码" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2"> </el-col>
							<el-col :span="10">
								<el-form-item label="产品名称" prop="productName">
									<!-- <el-select v-model="form.productName" placeholder="请选择状态" disabled
								   style="width: 400px;">
							<el-option
								v-for="(option, index) in statelist	"
								:key="index"
								:label="option.name"
								:value="option.status">
							</el-option>
						</el-select> -->
									<el-input v-model="form.productName" disabled placeholder="请输入产品名称" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="10">
								<el-form-item label="产品大类" prop="productCategory">
									<el-input v-model="form.productCategory" disabled placeholder="请输入产品大类" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2"> </el-col>
							<el-col :span="10">
								<el-form-item label="规格" prop="specification">
									<el-input v-model="form.specification" disabled placeholder="请输入规格" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<!-- 第二行开始 -->
						<el-row> </el-row>

						<el-row>
							<el-col :span="10">
								<el-form-item label="物料描述" prop="materialDescription">
									<el-input
										v-model="form.materialDescription"
										disabled
										placeholder="请输入物料描述"
										clearable
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2"> </el-col>
							<el-col :span="10">
								<el-form-item label="厂家" prop="manufacturer">
									<el-input v-model="form.manufacturer" disabled placeholder="请输入厂家" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row>
							<el-col :span="10">
								<el-form-item label="产品定位" prop="productPositioning">
									<el-input
										v-model="form.productPositioning"
										disabled
										placeholder="请输入产品定位"
										clearable
									></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="2"> </el-col>
							<el-col :span="10">
								<el-form-item label="价格" prop="price">
									<el-input v-model="form.price" disabled placeholder="请输入价格" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<!-- <el-row>
				<el-col :span="10">
					<el-form-item label="岗位" prop="post">
						<el-input disabled v-model="form.post" placeholder="请输入岗位" clearable></el-input>
					</el-form-item>
				</el-col>
								<el-col :span="2">
				</el-col>
				<el-col :span="10">
					<el-form-item label="岗位级别" prop="postLevel">
						<el-input disabled v-model="form.postLevel" placeholder="请输入岗位级别" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row> -->

						<!-- 修改为多选下拉列表开始 -->
						<!-- <labelnam title="基本信息"></labelnam> -->
						<!-- <el-col :span="24">
    <el-divider orientation="left">分配客户</el-divider>
  </el-col> -->

						<el-row>
							<!-- <el-col :span="2">
			<el-button type="primary" icon="el-icon-plus" size="small" @click="handleClick">fen</el-button>
		</el-col> -->
							<!-- <el-col :span="22">
			<el-table :data="allocatedCustomers" style="width: 100%" stripe>
			<el-table-column prop="id" label="客户ID"></el-table-column>
			<el-table-column prop="name" label="客户名称"></el-table-column>
			<el-table-column prop="phone" label="客户电话"></el-table-column>
			<el-table-column prop="email" label="客户邮箱"></el-table-column>
			<el-table-column prop="address" label="客户地址"></el-table-column>
			</el-table>
		</el-col> -->
						</el-row>
					</el-form>
				</div>
			</el-main>
			<el-footer>
				<!-- <el-button style="margin-left: 30px" @click="visible=false" >取 消</el-button>
		<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button> -->
			</el-footer>
			<!-- <div style="width: 100%;height: 70px;position: absolute;bottom: 0;border-top: 1px solid #E8E8E8;padding-top: 10px">
		<el-button style="margin-left: 30px" @click="visible=false" >取 消</el-button>
		<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
	</div> -->
			<!-- <customer @success="handleSuccess"
					@closed="customerVisible = false"	 @guanbi="close" ref="customer" v-if="customerVisible"></customer> -->
		</el-container>
	</el-drawer>
</template>
<script>
// import axios from 'axios'
// import customer from "./customer.vue";
// import labelnam from './labelname.vue'
export default {
	//   components: { customer ,labelnam},
	emits: ['success', 'closed'],
	data() {
		return {
			mode: 'add',
			titleMap: {
				edit: '编辑用户',
				show: '查看'
			},
			options: [],
			visible: false,
			customerVisible: false, //
			isSaveing: false,
			scene: [],
			statelist: [
				{
					status: '0',
					name: '离职'
				},
				{
					status: '1',
					name: '在职'
				}
			],
			form: {
				empNum: '',
				status: '',
				name: '',
				phone: '',
				ldap: '',
				email: '',
				companyDescr: '',
				dept: '',
				post: '', // 修改为数组类型
				postLevel: '',
				sceneDept: [],
				areaDept: '',
				province: [],
				sceneList: [],
				empArea: {},
				provList: [],
				empDepartment: []
			},
			scenedata: [],
			rules: {
				empNum: {
					required: true,
					message: '编码不能为空',
					trigger: 'blur'
				},
				status: {
					required: true,
					message: '状态不能为空',
					trigger: 'blur'
				},
				name: {
					required: true,
					message: '姓名不能为空',
					trigger: 'blur'
				},
				phone: {
					required: true,
					message: '电话不能为空',
					trigger: 'blur'
				},
				ldap: {
					required: true,
					message: 'LDAP不能为空',
					trigger: 'blur'
				},
				email: {
					required: true,
					message: '邮箱不能为空',
					trigger: 'blur'
				},
				companyDescr: {
					required: true,
					message: '公司不能为空',
					trigger: 'blur'
				},
				dept: {
					required: true,
					message: '部门不能为空',
					trigger: 'blur'
				},
				post: {
					required: true,
					message: '岗位不能为空',
					trigger: 'blur'
				},
				postLevel: {
					required: true,
					message: '岗位级别不能为空',
					trigger: 'blur'
				},
				sceneList: {
					required: true,
					message: '对应场景部不能为空',
					trigger: 'blur'
				},
				areaDept: {
					required: true,
					message: '负责片区不能为空',
					trigger: 'blur'
				},
				provList: {
					required: true,
					message: '省份不能为空',
					trigger: 'blur'
				}
			},
			groups: [],
			groupsProps: {
				value: 'id',
				emitPath: false,
				checkStrictly: true
			},
			depts: [],
			deptsProps: {
				value: 'id',
				checkStrictly: true
			},
			areaDeptOptions: []
		}
	},
	mounted() {
		// this.getGroup()
		// this.getDept()
		//    this.options = this.$TOOL.data.get('ChinaTree')
	},
	methods: {
		dialogClick() {
			this.$nextTick(() => {
				this.$refs.customer.multipleSelection
			})
		},
		sceneDept(val) {
			console.log(val)
			if (val.length > 0) {
				let arr = []
				val.forEach((item) => {
					this.scene.forEach((item1) => {
						if (item == item1.orgNo) {
							arr.push(item1)
						}
					})
				})
				//   console.log(arr)
				this.scenedata = arr
			}
		},
		getSimpleCheckedNodeIds(originData) {
			// 定义数组
			const checkedNodeIds = []
			// 判断是否为全选，若为全选状态返回被全选的节点，不为全选状态正常返回被选中的节点
			const isAllChecked = function (node) {
				const childNodes = node.root ? node.root.childNodes : node.childNodes
				childNodes.forEach((child) => {
					if (child.checked) {
						checkedNodeIds.push(child.data.id)
					}
					if (child.indeterminate) {
						isAllChecked(child)
					}
				})
			}
			isAllChecked(originData)
			return checkedNodeIds
		},
		handleClick() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (!valid) {
					// this.form.sceneDept = this.form.sceneList
					// this.form.areaDept = this.form.empArea
					// this.form.province = this.form.provList
					this.customerVisible = true
					this.$nextTick(() => {
						console.log(this.form)
						if (this.form.sceneList.length > 0) {
							let arr = []
							this.form.sceneList.forEach((item) => {
								this.scene.forEach((item1) => {
									if (item == item1.orgNo) {
										arr.push(item1)
									}
								})
							})
							//   console.log(arr)
							this.form.empDepartment = arr
						}
						// 省市
						if (this.$refs.seltree.getCheckedNodes().length > 0) {
							let name = ''
							let arr = []
							this.$refs.seltree.getCheckedNodes().forEach((item) => {
								if (item.children) {
									name = item.value
									let obj = {
										provinceName: item.label,
										provinceCode: item.value,
										cityCode: 'all',
										cityName: 'all'
									}
									arr.push(obj)
								} else if (item.code != name) {
									let obj = {
										provinceName: item.province,
										provinceCode: item.code,
										cityCode: item.value,
										cityName: item.labels
									}
									arr.push(obj)
								}
							})
							console.log(arr)
							this.form.empProvinces = arr
						}
						let data = { ...this.form }
						// 片区
						data.empArea = {}
						this.areaDeptOptions.forEach((item) => {
							if (data.areaDept == item.orgNo) {
								data.empArea = item
							}
						})

						// data.sceneDept.forEach(item=>{
						// 	data.department += item+';'
						// })
						this.$refs.customer.open('customer').setData(data)
					})
				} else {
					return false
				}
			})
		},
		handleCheckChange() {
			// console.log(checkedNodes)
			//   console.log('选中的根节点：', rootNodes);
		},
		open(mode) {
			this.mode = mode
			this.visible = true
			console.log(this.visible)
			return this
		},
		handleNodeClick(node) {
			console.log(node)
			console.log(this.form)
		},
		async getGroup() {
			var res = await this.$API.basic.org.list.post({ data: {} })
			this.groups = res.data
			var scenes = await this.$API.emp.getScene.get()
			this.scene = scenes.data
			var area = await this.$API.emp.getArea.get()
			this.areaDeptOptions = area.data
		},
		async getDept() {
			var res = await this.$API.basic.org.list.post({ data: {} })
			this.depts = res.data
		},
		// async getChinaTree(){
		//      var res = await this.$API.emp.getChinaTree.post();
		// 	 if(res.code == '0'){
		// 		this.options = res.data.map(province => ({
		// 		label: province.province,
		// 		value: province.code,
		// 		tag:0,
		// 		children: province.cities.map(city =>({
		// 			label: province.province+'/'+city.name,
		// 			value: city.code,
		// 			code:province.code,
		// 			labels:city.name,
		// 			tag:1,
		// 			province:province.province,
		// 			children:city.area.map(area => ({
		// 		        label: province.province+'/'+city.name+'/'+area.name,
		// 		    	value: area.code,
		// 			    code:province.code,
		// 				 province:province.province,
		// 			    labels:city.name,
		// 			    citycode:city.code,
		// 				areaName:area.name,
		// 				areacode:area.code,

		// 				tag:2
		// 			}))
		// 		}))
		// 	}));
		// 	 }
		// },
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true
					// 	console.log(this.form.sceneList)
					//    场景部

					if (this.form.sceneList.length > 0) {
						let arr = []
						this.form.sceneList.forEach((item) => {
							this.scene.forEach((item1) => {
								if (item == item1.orgNo) {
									arr.push(item1)
								}
							})
						})
						//   console.log(arr)
						this.form.empDepartment = arr
					}
					// 省市
					if (this.$refs.seltree.getCheckedNodes().length > 0) {
						let provinceName = ''
						let cityName = ''
						let arr = []
						this.$refs.seltree.getCheckedNodes().forEach((item) => {
							if (item.tag == 0) {
								provinceName = item.value
								let obj = {
									provinceName: item.label,
									provinceCode: item.value,
									cityCode: 'all',
									cityName: 'all',
									areaCode: 'all',
									areaName: 'all'
								}
								arr.push(obj)
							} else if (item.tag == 1 && item.code != provinceName) {
								cityName = item.value
								let obj = {
									provinceName: item.province,
									provinceCode: item.code,
									cityCode: item.value,
									cityName: item.labels,
									areaCode: 'all',
									areaName: 'all'
								}
								arr.push(obj)
							} else if (item.tag == 2 && item.code != provinceName && item.citycode != cityName) {
								let obj = {
									provinceName: item.province,
									provinceCode: item.code,
									cityCode: item.citycode,
									cityName: item.labels,
									areaCode: item.areacode,
									areaName: item.areaName
								}
								arr.push(obj)
							}
						})
						console.log(arr)
						this.form.empProvinces = arr
					}
					let data = { ...this.form }
					// 片区
					data.empArea = {}
					this.areaDeptOptions.forEach((item) => {
						if (data.areaDept == item.orgNo) {
							data.empArea = item
						}
					})
					console.log(data)
					var res = await this.$API.emp.updateEmp.post({ data: data })
					this.isSaveing = false
					if (res.code == 0) {
						this.$emit('success')
						this.visible = false
						this.$message.success('操作成功')
					} else {
						this.$alert(res.message, '提示', { type: 'error' })
					}
				} else {
					return false
				}
			})
		},
		setData(data) {
			if (data.returnEmpArea) {
				this.form.areaDept = data.returnEmpArea.orgNo
			}
			if (data.returnEmpDepartment) {
				this.form.sceneList = []
				data.returnEmpDepartment.forEach((item) => {
					this.form.sceneList.push(item.orgNo)
				})
			}

			if (data.returnEmpProvinces) {
				this.form.provList = []
				data.returnEmpProvinces.forEach((item) => {
					if (item.cityName == 'all' && item.cityCode == 'all') {
						this.options.forEach((item1) => {
							if (item.provinceCode == item1.value) {
								item1.children.forEach((item2) => {
									item2.children.forEach((item3) => {
										this.form.provList.push(item3.value)
									})
								})
							}
						})
					} else if (
						item.cityName != 'all' &&
						item.cityCode != 'all' &&
						item.areaName == 'all' &&
						item.areaCode == 'all'
					) {
						this.options.forEach((item1) => {
							if (item.provinceCode == item1.value) {
								item1.children.forEach((item2) => {
									if (item.cityCode == item2.value) {
										item2.children.forEach((item3) => {
											this.form.provList.push(item3.value)
										})
									}
								})
							}
						})
					} else {
						this.form.provList.push(item.cityCode)
					}
				})
			}
			Object.assign(this.form, data)
		}
	}
}
</script>

<style scoped>
/deep/.el-form--label-left .el-form-item__label {
	justify-content: flex-end;
}
/deep/.el-select {
	width: 100%;
}
</style>
